<template>
  <div>
    <div class="lable-text">
      <div class="info">
        <span>姓名：{{ info.borrower }}</span>
        <span>身份证：{{ info.cardNumber }}</span>
      </div>
      <div class="time">截止日期：{{ currentTime }}</div>

    </div>
    <el-table
      :data="tableData"
      border
      show-summary
      style="width: 100%"
      :summary-method="getSummaries"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        type="index"
        label="序号"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="repayDate"
        label="代偿时间">
      </el-table-column>
      <el-table-column
        prop="principal"
        label="代偿本金">
      </el-table-column>
      <el-table-column
        prop="noPayAmount"
        label="未结清代偿本金">
      </el-table-column>
      <el-table-column
        prop="occupancy"
        label="资金占用费">
      </el-table-column>
      <el-table-column
        prop="breach"
        label="违约金">
      </el-table-column>
      <el-table-column
        prop="debt"
        label="实现债权费用">
      </el-table-column>
      <el-table-column
        prop="otherAmount"
        label="已付其他费用">
        <template slot-scope="{row}">
          <span>{{otherExpensesPaid}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="结清费用合计" prop="total">
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <el-pagination background layout="total,prev, pager, next, sizes" :total="total" :page-size="pageSize"
                     :current-page.sync="pageNum" :page-sizes="[10, 20, 30, 40]"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getRepayDetailDetails } from "../../assets/js/api";
import { getNowTimeFull } from "../../assets/js/utlis";

export default {
  name: "settleExpenseDetails",
  props: ["orderNumber"],
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      currentTime: "",
      otherExpensesPaid:0,//已付其他费用
      info:{},

    };
  },
  mounted() {


    // this.tableData.forEach((ite, idx) => {
    //   this.otherExpensesPaid+=ite.otherAmount;
    //   ite.total=ite.principal+ite.noPayAmount+ite.occupancy+ite.breach;
    // });


    this.getList();

    this.currentTime = getNowTimeFull();
  },
  methods: {

    //合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        // 合并第一行
        if (columnIndex === 7) {
          // 从第7列开始
          return [this.pageSize, 1]

        }
        // else if (columnIndex === 2 || columnIndex === 3) {
        //   return [0, 0]
        // }
      }
      else if ( columnIndex === 7 ) {
        // 每行的低7个数都要省略
        return [0, 0]
      }

    },
    //合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 1) {
          sums[index] = "";
          return;
        }
        if (index === 8) {
          sums[index] = 0;
          let num=0;
          sums.forEach((ite, idx) => {
            if (idx > 2 && idx < 8) {
              if (idx == 7) {
                num -=ite;
              } else {
                num +=ite;
              }
              sums[index]=Math.round(num*100)/100;

            }
          });
          return;
        }

        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
         let num  = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index]=Math.round(num*100)/100;
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    //改变每页条数
    handleSizeChange(csize) {
      this.pageSize = csize;
      this.pageNum = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.pageNum = cpage;
      this.getList();
    },
    getList() {
      getRepayDetailDetails({
        orderNumber: this.orderNumber,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.info=res.data;
        this.tableData = res.data.detailList.records;
        this.tableData.forEach((ite, idx) => {
          this.otherExpensesPaid+=ite.otherAmount;
          let num=ite.noPayAmount+ite.occupancy+ite.breach+ite.debt
          ite.total=Math.round(num*100)/100;
        });

        this.total = res.data.detailList.total;
      });
    }
  },
};
</script>

<style scoped>
.lable-text{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  font-size: 14px;
}
.info span{
  margin-right: 40px;
}
.time {
  /*text-align: right;*/
  /*margin-bottom: 25px;*/
}

.pagination {
  text-align: right;
  margin-top: 20px;
}

/deep/ .cell {
  text-align: center !important;
}

/deep/ .has-gutter tr td:nth-child(9) {
  color: #FB575E !important;
}
</style>